{% extends 'base.html' %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/static/css/edit_userinfo.css">
<script language=javascript src='/static/js/common_functions.js'></script>
{% endblock %}

{% block middle %}
<div style="position:absolute;left:38%;top:30%;text-align:center;">

    <form class="layui-form" action="" style="text-align: left">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" id="nickname_label" name="{{ username }}">昵称:</label>
                <div class="layui-input-block">
                    <input type="text" id="nickname_input" name="nickname" required lay-verify="required"
                           value="{{ nickname }}" autocomplete="off" class="layui-input" style="width: 360px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value=0 title="男" lay-filter=gender_radio>
                    <input type="radio" name="gender" value=1 title="女" lay-filter=gender_radio>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日:</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="birthday">
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个人简介</label>
            <div class="layui-input-block">
                <textarea name="profile" conten
                          placeholder="一句表达自己个性/状态/向往/追求的话 (200字以内)"
                          class="layui-textarea" id="personal_profile"
                          style="min-height: 140px;max-height: 140px;resize: none;" maxlength="200"
                          onkeyup="setLength(this, 200, 'wordsLength');">{{ personal_profile }}</textarea>
                <span id="wordsLength" style="position:absolute; right:5px; bottom:1vh; font-size:12px; color:#BDCADA;">0/200</span>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="srm" style="width: 190px">确认修改</button>
            </div>
        </div>

    </form>
</div>

<script type="text/javascript">
    //文本域字数监听
    function setLength(obj, maxlength, id) {
        var num = maxlength - obj.value.length;
        var leng = id;
        if (num < 0) {
            num = 0;
        }
        document.getElementById(leng).innerHTML = num + "/200";
    };
    
    
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;
        var nick_name = $("#nickname_input").val();
        var gender = 0;
        var birthday = "{{ birthday }}";
        var personal_profile = "";
        var do_next_flag = true;
        var val_user_name = $("#nickname_label").attr("name");

        // 根据后端返回的数据, 设置单选框初始值
        var current_gender = {{ gender }};
        console.log(current_gender);
        console.log(birthday);

        if (current_gender == 0) {
            $("input[name=gender][value=0]").prop("checked","true"); 
        }else
        {
            $("input[name=gender][value=1]").prop("checked","true");
        }
        form.render(); //更新渲染
    
    
        laydate.render({
            elem: '#birthday', // 指定元素
            type: 'date',   // 只显示年月日, 不显示时间
            value: birthday,  // 初始值
            done: function (value, date, endDate) {
                birthday = value; // 赋值
            }
        });
    
        $("#nickname_input").blur(function () {
            // 昵称和密码非空的判断, layUI已经自动实现了
            nick_name = $("#nickname_input").val();
            if (!IsEmpty(nick_name)) {
    
                // 限定昵称最大长度为200
                if (nick_name.length <= 200) {
                    if (JudgeUsername(nick_name)) {
                        // 先判断昵称的格式符合要求: 只能是字母, 数字, 下划线组合, 并且数字不能放在开头, 不能包含特殊字符, 可以为汉字
                        do_next_flag = true;
    
                    } else {
                        layer.msg("该昵称不符合要求格式 !");
                        $("#nickname_input").select();
                        do_next_flag = false;
                    }
                } else {
                    layer.msg("昵称长度不能超过200个字符 !");
                    do_next_flag = false;
                }
            }
        });
    
        // 监听性别单选框
        form.on('radio(gender_radio)', function (data) {
            gender = data.value;  // HTML中, 设定的值, 男性是0, 女性是1, 整数
        });
    
        // 提交表单
        form.on('submit(srm)', function (data) {
            personal_profile = $("#personal_profile").val();
            var user_id = aesEncrypt(val_user_name).replace(/=/g, "o").replace(/&/g, "o");
    
            if (JudgeUsername(personal_profile)) {
                $.ajax({
                    type: "put",
                    url: "modify_personal_profile/"+user_id+"/",
                    ContentType: "application/x-www-form-urlencoded;charset=utf-8",
    
                    data: {
                        user_id: user_id,
                        personal_profile: personal_profile,
                        birthday: birthday,
                        gender: gender,
                        nickname: nick_name,
                    },
    
                    success: function (data) {
                        // 注册成功之后, 要将界面跳转到用户中心界面
                        var new_url = StringFormat("http://127.0.0.1:8000/users/details?username={0}", val_user_name);
                        window.location.replace(new_url);
                    },
    
                    error: function(data){
                       console.log(data);
                    }
                })
    
            } else {
                layer.msg("个人简介内容不符合格式要求 !");
                $("#personal_profile").select();
                do_next_flag = false;
            }
    
            do_next_flag = true;
            return false; // 组织表单提交后, 自动刷新清空的操作
        });
    
    });


</script>
{% endblock %}